<template>
    姓名: <input type="text" v-model="name">
    性别: <input type="text" v-model="sex">

</template>

<script lang="ts" setup>
import { ref, watch, watchEffect } from 'vue';
    let name = ref("孙悟空")
    let sex = ref("男")

    //监听单个属性
    //语法：watch(变量，(新数据，旧数据) => {})
    watch(name, (newVal, oldVal) => {
        console.log(newVal, oldVal)
    })

    // 监听多个属性
    watch([name, sex], (newVal, oldVal) => {
        console.log(newVal, oldVal)
    })

    //watchEffect 默认初始化监听一次
    //自动收集依赖
    watchEffect(() => {
        console.log(sex.value, "=======")
    })
</script>